import React, {Component,} from "react";
import Admin from "../../../layout/Admin";
import {Button, Form, Input, PageHeader, notification, Switch,} from "antd";
import IOSWechatModalControl from "../../../model/IOSWechatModalControl";
const log = console.log.bind(console)
class WechatModal extends Component {

    constructor(props) {
        super(props)
        this.model = new IOSWechatModalControl()
        this.state = {
            task: false,
            vote: false,
            gameAd: false,
            index: false,
            room: false,
            form: {
                1: {
                    ver: '',
                },
                2: {
                    ver: '',
                    state: true,
                }
            }
        }
    }

    componentDidMount() {
        this.task()
        this.vote()
        this.gameAd()
        this.index()
        this.room()
    }

    task() {
        this.model
            .task()
            .then(res => {
                const data = res.data.ok
                this.setState({
                    task: data === 'on',
                })
            })
    }

    vote() {
        this.model
            .vote()
            .then(res => {
                const data = res.data.ok
                this.setState({
                    vote: data === 'on',
                })
            })
    }

    gameAd() {
        this.model
            .gameAd()
            .then(res => {
                const data = res.data.ok
                log(data)
                this.setState({
                    gameAd: data === 'on',
                })
            })
    }

    index() {
        this.model
            .index()
            .then(res => {
                const data = res.data.ok
                log(data)
                this.setState({
                    index: data === 'on',
                })
            })
    }

    room() {
        this.model
            .room()
            .then(res => {
                const data = res.data.ok
                log(data)
                this.setState({
                    room: data === 'on',
                })
            })
    }

    setTask = () => {
        this.model.setTask({
            Flag: this.state.task === true ? 'off' : 'on',
        }).then(res => {
            if (res.data.ok) {
                this.task()
            }
        })
    }

    setVote = () => {
        this.model.setVote({
            Flag: this.state.vote === true ? 'off' : 'on',
        }).then(res => {
            if (res.data.ok) {
                this.vote()
            }
        })
    }

    setGameAd = () => {
        this.model.setGameAd({
            Flag: this.state.gameAd === true ? 'off' : 'on',
        }).then(res => {
            if (res.data.ok) {
                this.gameAd()
            }
        })
    }

    setIndex = () => {
        this.model.setIndex({
            Flag: this.state.index === true ? 'off' : 'on',
        }).then(res => {
            if (res.data.ok) {
                this.index()
            }
        })
    }

    setRoom = () => {
        this.model.setRoom({
            Flag: this.state.room === true ? 'off' : 'on',
        }).then(res => {
            if (res.data.ok) {
                this.room()
            }
        })
    }

    getModalState = (params) => {
        const ver = params.ver
        const m = this.model
        m
            .get({ver,})
            .then((resp) => {
                console.log(resp)
                const state = resp.data.data
                const m = {
                    1: '弹出',
                    2: '不弹出',
                }
                const ver = params.ver
                const msg = `版本号: ${ver}`
                const desc = `微信支付弹窗状态为 ${m[state]}`
                notification.open({
                    message: msg,
                    description: desc,
                })
            })
    }

    setModalState = (params) => {
        const ver = params.ver
        const state = params.state ? 1 : 2
        const m = this.model
        m
            .change({ver, state,})
            .then((resp) => {
                const ver = params.ver
                const msg = `版本号: ${ver}`
                const m = {
                    1: '弹出',
                    2: '不弹出',
                }
                const desc = `微信支付弹窗状态已经修改为 ${m[state]}`
                if (resp.data.ok === 1) {
                    notification.open({
                        message: msg,
                        description: desc,
                    })
                }

            })
    }

    onSwitchChange = () => {
        this.setState({
            form: {
                2: {
                    state: !this.state.form[2].state,
                }
            }
        })
    }

    render() {

        const header = <div style={{background: '#fff'}}>
            <PageHeader title='App弹窗控制'/>
        </div>

        const form1Value = this.state.form[1]
        const form2Value = this.state.form[2]

        const form1 = <Form
            ref={el => this.form1 = el}
            initialValues={form1Value}
            onFinish={this.getModalState}
        >

            <Form.Item
                label="版本号"
                name="ver"
            >
                <Input />
            </Form.Item>

            <Form.Item>
                <Button type="primary" htmlType="submit">
                    查询
                </Button>
            </Form.Item>

        </Form>

        const form2 = <Form
            ref={el => this.form2 = el}
            initialValues={form2Value}
            onFinish={this.setModalState}
        >

            <Form.Item
                label="版本号"
                name="ver"
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="弹窗状态"
                name="state"
            >
                <Switch
                    checked={form2Value.state}
                    onChange={this.onSwitchChange}
                />
            </Form.Item>

            <Form.Item>
                <Button type="primary" htmlType="submit">
                    修改
                </Button>
            </Form.Item>

        </Form>

        return <Admin>
            {header}
            <div className='list-container'>
                {/*{form1}*/}
                <p>IOS微信充值弹窗控制</p>
                {form2}
                <p>评选活动显示控制: <a onClick={() => this.setVote()}>{this.state.vote === true ? '点击关闭' : '点击开启'}</a></p>
                <p>任务中心显示控制: <a onClick={() => this.setTask()}>{this.state.task === true ? '点击关闭' : '点击开启'}</a></p>
                <p>比赛广告显示控制: <a onClick={() => this.setGameAd()}>{this.state.gameAd === true ? '点击关闭' : '点击开启'}</a></p>
                <p>比赛指数显示控制: <a onClick={() => this.setIndex()}>{this.state.index === true ? '点击关闭' : '点击开启'}</a></p>
                <p>vip体验包厢显示控制: <a onClick={() => this.setRoom()}>{this.state.room === true ? '点击关闭' : '点击开启'}</a></p>

            </div>
        </Admin>
    }

}

export default WechatModal
